import React, { FC, useMemo } from 'react';
import classnames from 'classnames';
import { Button } from 'antd-mobile';

import styles from './skill.module.less';

interface ISkillProp {
  name?: string; // 名字
  suffix?: string; // 尾巴
  require?: number; // 必要条件,默认左边
  adjust?: number; // 定位
  size?: number; // 线长度
  stage?: 'NOVICE' | 'VETERAN' | 'MASTER';
  extra?: string; // 额外的线
  active?: string; // 激活
  onClick?: () => void; // 点击事件
}
const remSize = 50;
const Skill: FC<ISkillProp> = (props) => {
  const {
    require, name, suffix, stage, adjust = 0, size, extra, onClick, active,
  } = props;

  // 阶段颜色
  const stageStyle = useMemo(() => {
    if (stage === 'NOVICE') {
      return styles.novice;
    }
    if (stage === 'VETERAN') {
      return styles.veteran;
    }
    if (stage === 'MASTER') {
      return styles.master;
    }
    return null;
  }, [stage]);

  // 额外线高
  const extraHeight = useMemo(() => {
    const arr = extra?.split('-');
    return arr?.length > 0 ? (Number(arr[1]) - 1) * (32 + 9) : 0;
  }, [extra]);

  // 额外线高
  const extraTop = useMemo(() => {
    const arr = extra?.split('-');
    let top = 0;
    if (arr && arr[1] === '3') {
      top = (extraHeight - 32) / 2 * -1;
    }
    if (arr && arr[1] === '2') {
      top = 14.5;
    }
    if (arr && arr[2] === 'reverse') {
      top = top * -1 - 10.5;
    }
    return top;
  }, [extra, extraHeight]);

  // 额外线高
  const extraLeft = useMemo(() => {
    const arr = extra?.split('-');
    if (arr && arr[0] === 'right') {
      return -20;
    }
    if (arr && arr[0] === 'left') {
      return -12;
    }
    return 0;
  }, [extra]);

  // 额外线边框
  const extraBorder = useMemo(() => {
    const arr = extra?.split('-');
    if (arr && arr[0] === 'right') {
      return { borderRight: '2PX solid rgb(61, 101, 137)' };
    }
    if (arr && arr[0] === 'left') {
      return { borderLeft: '2PX solid rgb(61, 101, 137)' };
    }
    return {};
  }, [extra]);
  return (
    <Button
      className={classnames(
        styles.skill,
        'btn-nostyle ft-12',
        { hidden: !name },
      )}
      style={{ marginLeft: `${adjust * 50}vw` }}
      onClick={onClick}
    >
      <div className={classnames(styles.innerSkill, active === name ? styles.active : null)}>
        {
          extra ? (
            <div
              className={classnames(styles.extra)}
              style={{
                height: `${extraHeight / remSize}rem`,
                top: `${extraTop / remSize}rem`,
                left: `${extraLeft / remSize}rem`,
                ...extraBorder,
              }}
            />
          ) : null
        }
        {
          size > 0 ? (
            <div
              className={styles.line}
              style={{ width: `${size * 50}vw`, left: `-${size * 50}vw` }}
            />
          ) : null
        }
        <div
          className={classnames(
            styles.innerName,
            active === name ? styles.activeName : null,
            'flex-1 pd-4 one-txt-cut',
          )}
        >
          {name}
        </div>
        <div className={classnames(styles.innerSuffix, 'pd-2 text-center', stageStyle)}>{suffix}</div>
        {
          require ? (
            <div className={classnames(styles.require)}>{`${require}`}</div>
          ) : null
        }
      </div>
    </Button>
  );
};

export default Skill;
